<template lang="html">
  <div id="example">
    <ul class="switch-list">
      <li v-for="(item, index) in propList" :key="index" class="switch-item">
        <span>{{ item.name }}: </span>
        <zk-switch v-model="props[item.name]" />
      </li>
    </ul>

    <zk-table
      ref="table"
      sum-text="sum"
      index-text="#"
      :data="ListResult"
      :columns="columns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType"
    >
      <template slot="$expand" scope="scope">
        {{
          `My name is ${scope.row.name},
           this rowIndex is ${scope.rowIndex}.`
        }}
      </template>
      <template slot="cat_deleted" scope="scope">
        <div>
          <i
            v-if="!scope.row.cat_deleted"
            class="el-icon-success"
            style="color: lightgreen"
          />
          <i v-else class="el-icon-error" style="color: #f56c6c" />
        </div>
      </template>

      <template slot="cat_level" scope="scope">
        <el-tag
          size="mini"
          :type="
            scope.row.cat_level === 0
              ? ''
              : scope.row.cat_level === 1
                ? 'success'
                : 'warning'"
        >{{
          scope.row.cat_level === 0
            ? "一级"
            : scope.row.cat_level === 1
              ? "二级"
              : "三级"

        }}</el-tag>
      </template>

      <template slot="likes" scope="scope">
        <div>
          <el-row type="flex" justify="center">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="listEditor(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="listRemove(scope.row)"
            >删除</el-button>
          </el-row>
        </div>
      </template>
    </zk-table>
    <!-- 修改弹层 -->
    <el-dialog v-if="listShow" title="修改分类" :visible.sync="listShow">
      <list-layer :list-show.sync="listShow" :tab-row="tabRow" />
    </el-dialog>
  </div>
</template>

<script>
import ZkSwitch from './Switch/Switch'
import { categoriesList, categoriesRemeve } from '@/api/categories'
import ListLayer from './listLayer.vue'

export default {
  name: 'Example',
  components: {
    ZkSwitch,
    ListLayer
  },
  props: {},
  data() {
    return {
      listShow: false,
      dataPage: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
        total: null
      },
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: true,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      ListResult: [],
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'cat_deleted'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'cat_level'
        },
        {
          label: '操作',
          prop: 'likes',
          type: 'template',
          template: 'likes'
        }
      ],
      tabRow: {}
    }
  },
  computed: {
    propList() {
      return Object.keys(this.props).map((item) => ({
        name: item
      }))
    }
  },
  created() {
    this.categoriesList()
  },
  mounted() {
    this.$bus.$on('updateList', () => {
      this.categoriesList()
    })
  },
  beforeDestroy() {
    this.$off('updateList')
  },
  updated() {
    console.log()
    this.$refs.btnEditor && this.$refs.btnEditor.addEventListener('click', function() {
      console.log(123)
    })
  },
  methods: {
    // 编辑按钮
    listEditor(row) {
      console.log(row)
      this.listShow = true
      this.tabRow = row
    },
    // 删除按钮
    listRemove(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await categoriesRemeve(row.cat_id)
        this.categoriesList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async categoriesList() {
      try {
        const { data } = await categoriesList(this.dataPage)
        console.log(data)
        this.dataPage.pagenum = ++data.data.pagenum
        this.dataPage.pagesize = data.data.pagesize
        this.dataPage.total = data.data.total
        this.ListResult = data.data.result
        this.$emit('PageSize', this.dataPage)
        this.$message.success('刷新成功！~')
      } catch (error) {
        console.log(error)
      }
    }
  },
  btnEditor(row, rowIndex, column, columnIndex, $event) {
    console.log(row, rowIndex, column, columnIndex, $event)
  }

}
</script>

<style scoped lang="less">
.switch-list {
  margin: 20px 0;
  list-style: none;
  overflow: hidden;
}

.switch-item {
  margin: 20px;
  float: left;
}
</style>
